<template>
  <van-button
    v-if="!collected"
    :loading="loading"
    icon="like-o"
    size="mini"
    style="border: none"
    @click="collect(true)"
  />
  <van-button
    v-else
    :loading="loading"
    icon="like"
    size="mini"
    style="border: none"
    @click="collect(false)"
  />
</template>

<script>
import { collectArt, nocollectArt } from '@/api/article.js'
export default {
  name: 'FollowIndex',
  props: {
    collected: {
      type: Boolean,
      required: true
    },
    artId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    async collect (boo) {
      this.loading = true
      if (boo) {
        // 文章收藏
        try {
          await collectArt({
            target: this.artId
          })
          this.$toast('收藏成功')
          this.$emit('changeCollect')
        } catch (err) {
          console.log(err.response)
          this.$toast('收藏失败')
        }
      } else {
        // 取消文章收藏
        try {
          await nocollectArt(this.artId)
          this.$toast('取消收藏成功')
          this.$emit('changeCollect')
        } catch (err) {
          this.$toast('取消收藏失败')
          console.log(err.response)
        }
      }
      this.loading = false
    }
  }
}
</script>

<style></style>
